<template>
    <div
        :class="{
        'zy-content': !showClass,
        'docManWapper':true
       }"
    >
        <div class="wapperConent">
            <Row>
                <Col class="wapperLeft">
                    <!--          <div>-->
                    <!--            <Tree :data="data5" :render="renderContent" ref="tree"></Tree>-->
                    <!--          </div>-->
                    <div class="box_bot">
                        <v-jstree :data="data5"
                                  ref="tree"
                                  draggable
                                  @item-click="itemClick"
                                  @item-drop="itemDrop"
                                  no-dots
                                  text-field-name="folderName"
                        >
                            <template scope="_">
                                <div style="display: flex;justify-content: flex-end;align-items: center;"
                                     v-if="!_.model.isHide">
                                    <i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i>
                                    <template v-if="_.model.selected ">
                    <span v-if="_.model.editState">
                      <Input v-model="_.model.text" class="treeIpt"/>
                    </span>
                                        <span v-else>{{ _.model.text }}</span>
                                        <div class="iconBox" style="padding-left: 10px;">
                                            <span v-if="_.model.editState" class="icon_img" style="padding-right: 5px;"
                                                  @click="keyupCallback(_.model.text)"><i
                                                class="iconfont zy-common-wancheng"></i></span>
                                            <template v-if="_.model.parentId != -1">
                                                <template v-if="_.model.canHandle && !_.model.editState">
                          <span class="icon_img" style="padding-right: 5px;" v-has="'othsparepartDocEditDoc'"
                                @click="editTreeItem(_.model)">
                          <img src="@/assets/imgs/list/bomedit.png" width="15"/>
                        </span>
                                                </template>
                                                <template v-if="_.model.canHandle">
                           <span class="icon_img" style="padding-right: 5px;" v-has="'othsparepartDocDeleteDoc'"
                                 @click="deleteTreeOpen">
                            <img src="@/assets/imgs/list/bomdel.png" width="15"/>
                          </span>
                                                </template>
                                            </template>
                                            <span class="icon_img" style="padding-right: 5px;"
                                                  v-has="'othsparepartDocAddDoc'" @click.stop="addTreeItem(_.model)">
                            <img src="@/assets/imgs/list/bomadd.png" width="15"/>
                      </span>
                                        </div>
                                    </template>
                                    <template v-else>
                    <span v-if="_.model.editState">
                      <Input v-model="_.model.text" class="treeIpt"/>
                    </span>
                                        <span v-else>{{ _.model.text }}</span>
                                        <div class="iconBox" style="padding-left: 10px;">
                                            <span v-if="_.model.editState" class="icon_img" style="padding-right: 5px;"
                                                  @click="keyupCallback(_.model.text)"><i
                                                class="iconfont zy-common-wancheng"></i></span>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </v-jstree>
                    </div>


                </Col>
                <Col class="wapperRight">
                    <div class="searchBox search-box-layout">
                        <Row :gutter="24">
                            <Col span="4">
                                <div>
                                    <p class="label">{{ $t('doc.KeyWord') }}</p>
                                    <div class="ipt">
                                        <Input type="text" v-model="fileName"
                                               :placeholder="`${$t('common.inputInfo')}`"/>
                                    </div>
                                </div>
                            </Col>
                            <Col span="4">
                                <div>
                                    <p class="label hide-label">--</p>
                                    <div class="ipt">
                                        <Button class="search-btn" type="primary" v-has="'othsparepartDocQuery'"
                                                @click="clickSearchBtn">
                                            {{ $t('common.Query') }}
                                        </Button>
                                        <Button v-has="'othsparepartDocQuery'"
                                                class="reset-btn"
                                                @click="reset()"
                                        >{{ $t('common.reset') }}
                                        </Button>
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </div>
                    <div class="list-layout mt16">
                        <div class="btns clear">
                            <span class="title">{{ $t('common.listInformation') }}</span>
                            <Button v-has="'othsparepartDocUploadFile'" @click="importPrrShowH">
                                {{ $t('ledger.uploadFiles') }}
                            </Button>
                            <Button v-has="'othsparepartDocDeleteAll'" @click="deleteAll">{{
                                    $t('common.batchDelete')
                                }}
                            </Button>
                            <Button @click="getTableColumns(columns1)">
                                {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
                            </Button>
                        </div>
                        <div class="basicData tableContent">
                            <Table  class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
                                    :columns="columnsList" :data="tableList" @on-selection-change="onSelectChange">
                                <template slot-scope="{ row }" slot="fileSize">
                            <span v-if="!row.fileSize">
                            </span>
                                    <span v-else-if="row.fileSize < 1024">
                              {{ parseFloat(row.fileSize).toFixed(2) + 'B' }}
                            </span>
                                    <span v-else-if="row.fileSize < 1024 * 1024">
                              {{ parseFloat(row.fileSize / 1024).toFixed(2) + 'K' }}
                            </span>
                                    <span v-else-if="row.fileSize < 1024 * 1024 * 1024">
                              {{ parseFloat(row.fileSize / 1024 / 1024).toFixed(2) + 'M' }}
                            </span>
                                    <span v-else-if="row.fileSize < 1024 * 1024 * 1024">
                              {{ parseFloat(row.fileSize / 1024 / 1024 / 1024).toFixed(2) + 'G' }}
                            </span>
                                </template>
                                <template slot-scope="{ row }" slot="visitCount">
                            <span style="color: #2D8CF0;cursor: pointer"
                                  @click="numberShow(row.id,1)">{{ row.visitCount || 0 }}</span>
                                </template>
                                <template slot-scope="{ row }" slot="downLoadTimes">
                            <span style="color: #2D8CF0;cursor: pointer"
                                  @click="numberShow(row.id,2)">{{ row.downLoadTimes || 0 }}</span>
                                </template>
                                <template slot-scope="{ row }" slot="action">
                                    <div class="ivu-table-cell-slot">
                                        <!--                          v-show="row.previewJudge == 'true'"-->
                                        <span class="operationBtn" v-has="'managementyu'"
                                              @click="viewDocument(row, false)"><i
                                            class="iconfont zy-common-yulan"></i>{{ $t('ledger.Preview') }}</span>
                                        <!--                          v-show="row.realJudge == 'true'"-->
                                        <span class="operationBtn" v-has="'othsparepartDocDown'"
                                              @click="viewDocument(row, true)"><i class="iconfont zy-common-xiazai"></i>{{
                                                $t('doc.download')
                                            }}</span>
                                        <span class="operationBtn" v-has="'othsparepartDocDeleteAll'"
                                              @click="(deleteModalDoc = true, documentIds = [row.id])"><i
                                            class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span>
                                    </div>
                                </template>
                            </Table>
                        </div>

                        <div class="pageWrap mt16">
                            <pageLeftTitle :total="total" :selected="documentIds.length"/>
                            <Page :total="total" :current="pageNum" show-total show-sizer @on-change="changePageNum"
                                  @on-page-size-change="changePageSize"/>
                        </div>
                    </div>
                </Col>
            </Row>

            <!-- 批量导入 -->
            <docImport ref="docImport"
                       :selectTreeId="folderHierarchyId"
                       :attachmentBelongTo="2"
                       @importPrrBtn="importPrrBtnH"
            ></docImport>

            <iframeModalCompent v-if="iframeShow" :isStudy="false" :iframeShow="iframeShow"
                                :iframeModalSrc="iframeModalSrc"
                                @closeIframe="iframeShow = false"></iframeModalCompent>

            <numberModal ref="numberModal"></numberModal>
            <Modal :mask-closable="false" v-model="deleteModal" class="modal-title-layout" :title="$t('common.Delete')">
                <div class="icon red">
                    <i class="iconfont zy-common-shanchu"></i>
                </div>
                <p class="title">
                    <span>删除后，当前文件夹及其项下文件夹内容及文档全部删除，<br>{{ $t('common.sureDelete') }}</span>
                </p>
                <div slot="footer">
                    <Button type="default" @click="deleteModal = false">{{ $t('common.Cancle') }}</Button>
                    <Button type="primary" @click="deleteFolder">{{ $t('maintenance.Confirmed') }}</Button>
                </div>
            </Modal>
            <Modal :mask-closable="false" v-model="deleteModalDoc" class="modal-title-layout" :title="$t('common.Delete')">
                <div class="icon red">
                    <i class="iconfont zy-common-shanchu"></i>
                </div>
                <p class="title">
                    <span>删除后无法恢复，请确认是否删除？</span>
                </p>
                <div slot="footer">
                    <Button type="default" @click="deleteModalDoc = false">{{ $t('common.Cancle') }}</Button>
                    <Button type="primary" @click="deleteFolderDoc">{{ $t('maintenance.Confirmed') }}</Button>
                </div>
            </Modal>
        </div>
    </div>

</template>

<script>
import qs from 'qs';

import toggleTableOperation from "@/mixins/toggleTableOperation";
import VJstree from 'vue-jstree';
import docImport from "./modal/docImport.vue";
import iframeModalCompent from "./modal/iframe.vue";
import numberModal from "./modal/number.vue";
export default {
    name: "docManagement",
    props: ['showClass'],
    mixins:[toggleTableOperation],
    components: {
        docImport,
        iframeModalCompent,
        numberModal,
        VJstree
    },
    data() {
        return {
            iframeShow: false, // 预览弹窗
            iframeModalSrc: "",
            deleteModal: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            fileName: "",
            tableList: [],
            importPrrShowF: false, //是否显示批量导入弹窗
            columns1: [
                {
                    key: "selection",
                    type: "selection",
                    width: 60,
                    align: "center",
                },
                {
                    // title: "名称",
                    title: `${this.$t('doc.Name')}`,
                    key: "fileName",
                    align: "left",
                    width: 300,
                    ellipsis: true,
                    tooltip: true,
                    resizable: true
                },
                {
                    //title: "类型",
                    title: `${this.$t('doc.Type')}`,
                    key: "suffix",
                    align: "center",
                    width: 120,
                    resizable: true
                },
                {
                    //title: "文件大小",
                    title: `${this.$t('doc.FileSize')}`,
                    slot: "fileSize",
                    align: "center ",
                    width: 120,
                    resizable: true
                },
                {
                    //title: "描述",
                    title: `${this.$t('doc.Des')}`,
                    key: "fileDescription",
                    align: "center ",
                    ellipsis: true,
                    tooltip: true,
                    minWidth: 120,
                    resizable: true
                },
                {
                    // title: "浏览次数",
                    title: `${this.$t('doc.SeenBy')}`,
                    align: "center ",
                    slot: "visitCount",
                    width: 120,
                    resizable: true
                },
                {
                    // title: "下载次数",
                    title: `${this.$t('doc.Download')}`,
                    align: "center ",
                    slot: "downLoadTimes",
                    minWidth: 120,
                    resizable: true
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    width: this.util.autoWidth(250, 320),
                    align: "center",
                    fixed: "right"
                }
            ],
            data5: [
                {
                    title: "设备资料",
                    expand: true,
                    id: 0,
                    render: (h, {data}) => {
                        return h('span', {
                            style: {
                                display: 'inline-block',
                                width: '100%'
                            }
                        }, [
                            h('span', [
                                h('Icon', {
                                    props: {
                                        type: 'ios-folder'
                                    },
                                    style: {
                                        marginRight: '8px',
                                        color: '#ffe79b'
                                    }
                                }),
                                h("span", data.title)
                            ]),
                            h(
                                "span",
                                {
                                    style: {
                                        display: "inline-block",
                                        marginLeft: "32px"
                                    }
                                },
                                [
                                    h("Button", {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: "ios-add",
                                        }),
                                        style: {
                                            marginRight: '8px',
                                            width: '20px',
                                            height: '20px',
                                            marginTop: '-2px'
                                        },
                                        on: {
                                            click: () => {
                                                this.append(data);
                                            }
                                        },
                                        directives: [{
                                            name: 'has',
                                            value: 'docManagementAdd'
                                        }]
                                    },)
                                ]
                            )


                        ]);
                    },
                    children: []
                }
            ],
            buttonProps: {
                type: "default",
                size: "small"
            },
            // 输入框要修改的内容
            inputContent: "",
            folderId: null, // 删除文件夹id
            folderHierarchyId: null, // 右侧数据所属文件夹id
            deleteModalDoc: false,
            documentIds: [],
            expandObj: {}, // 树的收起和展开
            selectedId: null, // 左侧文件夹选中id
            selectTreeItem: {}
        };
    },
    mounted() {
        this.getTableColumnsWidth(this.columns1)
        this.getTreeList(true);
    },
    methods: {
        filterNoneDataItem(list) {
            for (let i = 0; i < list.length; i++) {
                if (!list[i].text && list[i].editState) {
                    list.splice(i, 1)
                    if (Array.isArray(list.children)) {
                        this.filterNoneDataItem(list.children)
                    }
                }
            }
        },
        iptBlur(item) {
            item.isHide = true
            this.$forceUpdate()
        },
        keyupCallback(value) {
            // if (e.keyCode === 13) {
            if (this.selectTreeItem.id) { // 编辑
                this.axios({
                    method: "post",
                    url: "/dms/folderHierarchy/update",
                    data: {
                        folderName: value,
                        parentId: this.selectTreeItem.parentId,
                        folderBelongTo: 2,
                        id: this.selectTreeItem.id,
                        attachmentBelongTo: 2,

                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.$Message.success(res.msg)
                        this.getTreeList()
                    } else {
                        this.$Message.warning({
                            content: res.msg,
                            duration: 6,
                            closable: true,
                        });
                    }
                });
            } else { // 新增
                this.axios({
                    method: "post",
                    url: "/dms/folderHierarchy/add",
                    data: {
                        folderName: value,
                        parentId: this.selectTreeItem.parentId,
                        folderBelongTo: 2,
                        attachmentBelongTo: 2,
                        // systemType: this.selectTreeItem.parentSystemType
                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.$Message.success(res.msg)
                        this.getTreeList()
                    } else {
                        this.$Message.warning({
                            content: res.msg,
                            duration: 6,
                            closable: true,
                        });
                    }
                });
            }
            // }
        },
        editTreeItem(item) {
            item.editState = true
        },
        addTreeItem(item) {
            item.children.push({
                title: '',
                editState: true,
                parentId: item.id,
                // parentSystemType: item.systemType
            })
            this.$forceUpdate()
        },
        deleteTreeOpen() {
            this.folderId = this.selectTreeItem.id
            this.deleteModal = true
        },
        itemClick(node, item) {

            this.selectTreeItem = item;
            this.folderHierarchyId = item.id
            this.clickSearch()
        },
        itemDrop(node, item, draggedItem) {
            const id = draggedItem.id
            const parentId = item.id
            this.axios({
                method: "post",
                url: "/dms/folderHierarchy/moveNode",
                data: {id, parentId, attachmentBelongTo: 2,}
            }).then(res => {
                if (res.code === 200) {
                    this.getTreeList(true);
                }
            });
        },
        // 删除左侧文件夹
        deleteFolder() {
            this.axios({
                method: "get",
                url: "/dms/folderHierarchy/delete",
                params: {folderId: this.folderId, attachmentBelongTo: 2,}
            }).then(res => {
                if (res.code === 200) {
                    this.$Message.success('删除成功！')
                    this.getTreeList()
                    this.deleteModal = false
                }
            });
        },
        // 删除右侧文档
        deleteFolderDoc() {
            this.axios({
                method: "post",
                url: "/dms/documentAttachment/delete",
                data: this.documentIds
            }).then(res => {
                if (res.code === 200) {
                    this.$Message.success('删除成功！')
                    this.clickSearch()
                    this.deleteModalDoc = false
                }
            });
        },
        numberShow(id, state) {
            this.$refs.numberModal.show(id, state)
        },
        // 上传文件
        importPrrShowH() {
            this.$refs.docImport.show()
        },
        importPrrBtnH() {
            //批量导入点击关闭按钮=
            this.pageNum = 1;
            this.clickSearch();
        },
        reset() {
            this.fileName = '';
            this.clickSearchBtn();
        },
        clickSearchBtn() {
            this.pageNum = 1;
            this.clickSearch();
        },
        clickSearch(folderHierarchyId = this.folderHierarchyId) {
            if (!folderHierarchyId) {
                return;
            }
            this.axios({
                method: "post",
                url: "/dms/documentAttachment/list",
                data: {
                    folderHierarchyId,
                    attachmentBelongTo: 2,
                    operationType: 1,
                    fileDescription: this.fileName,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
            }).then(res => {
                if (res.code === 200) {
                    this.tableList = res.data.list;
                    this.total = res.data.total;
                }
            });
        },
        changePageSize(value) {
            this.pageNum = 1;
            this.pageSize = value;
            this.clickSearch();
        },
        changePageNum(value) {
            this.pageNum = value;
            this.clickSearch();
        },
        // 预览和下载
        viewDocument(row, isDown) {
            this.axios({
                method: "post",
                url: "/dms/operationRecord/add",
                data: {
                    documentAttachmentId: row.id,
                    operationType: isDown ? 2 : 1,
                    operationTime: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                }
            }).then(res => {
                if (res.code === 200) {
                    if (isDown) {
                        let a = document.createElement('a')
                        a.style.display = 'none'
                        a.href = this.util.filePathToUrl(row.filePath)
                        a.download = row.fileName
                        document.body.appendChild(a)
                        a.click()
                        a.remove()
                        // window.open(row.fileUrl, "_blank");
                    } else {
                        this.iframeShow = true
                        let env = process.env.NODE_ENV;
                        let origin = window.location.origin;
                        let path = '/';
                        if (env === 'tong') {
                            path = '';
                        }
                        let fileUrl = origin + this.util.filePathToUrl(row.filePath)
                        this.iframeModalSrc = origin + path + `/fileServer/onlinePreview?url=${fileUrl}`
                    }
                    this.clickSearch()
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }

            })
        },
        getTreeList(isFirst = false) {
            this.axios({
                method: "get",
                // url: "/dms/folderHierarchy/list",
                url: "/dms/folderHierarchy/list",
                params: {
                    attachmentBelongTo: 2,
                    folderBelongTo: 2
                }
            }).then(res => {
                if (res.code === 200) {
                    if ((res.data[0] && isFirst) || res.data.length === 1) {
                        this.folderHierarchyId = res.data[0].id
                        this.clickSearch()
                    }
                    this.data5 = this.deepMap(res.data)
                    this.data5[0]['selected'] = true

                    this.$forceUpdate()
                }
            });
        },
        deepMap(arr) {
            return arr.map(v => ({
                text: v.folderName,
                id: v.id,
                value: v.id,
                disabled: false,
                canHandle: v.systemType != 1,
                dragDisabled: v.systemType == 1,
                dropDisabled: v.systemType == 1,
                opened: true,
                parentId: v.parentId,
                selected: v.id === this.folderHierarchyId,
                children: v.children && v.children.length ? this.deepMap(v.children) : [],
                systemType: v.systemType
            }))
        },
        // 树渲染逻辑
        renderContent(h, {root, node, data}) {
            return h("span", {
                class: "treeBox",
                style: {
                    display: 'inline-block',
                    width: '100%',
                    cursor: 'pointer'
                },
                on: {
                    click: () => {
                        // 点击Tree节点触发
                        data.editState ? '' : this.handleClickTreeNode(data.id)
                    }
                }
            }, [
                h('span', [
                    h('Icon', {
                        props: {
                            type: `${'ios-folder'}`
                        },
                        style: {
                            marginRight: '8px',
                            color: '#ffe79b'
                        }
                    }),
                    h(`${data.editState ? '' : 'span'}`, {
                        style: {
                            position: 'relative'
                        },
                    }, data.title),
                    h(`${data.editState ? 'input' : ''}`,
                        {
                            attrs: {
                                value: `${data.editState ? data.title : ''}`,
                                autofocus: true,
                                placeholder: '请输入'
                            },
                            style: {
                                width: '120px',
                                cursor: 'auto',
                                border: '1px solid #000000'
                            },
                            on: {
                                change: (event) => {
                                    this.inputContent = event.target.value
                                },
                                keyup: (e) => {
                                    // 回车键
                                    if (e.keyCode === 13) {
                                        if (data.id) { // 编辑
                                            this.axios({
                                                method: "post",
                                                url: "/dms/folderHierarchy/update",
                                                data: {
                                                    folderName: this.inputContent || '请输入',
                                                    parentId: data.parentId,
                                                    folderBelongTo: 2,
                                                    id: data.id,
                                                }
                                            }).then(res => {
                                                if (res.code === 200) {
                                                    this.$Message.success('编辑成功')
                                                    this.expandObj = {}
                                                    root.forEach(v => {
                                                        this.expandObj[v.node.id] = v.node.expand
                                                    })
                                                    this.getTreeList()
                                                } else {
                                                    this.$Message.warning({
                                                        content: res.msg,
                                                        duration: 6,
                                                        closable: true,
                                                    });
                                                }
                                            });
                                        } else { // 新增
                                            this.axios({
                                                method: "post",
                                                url: "/dms/folderHierarchy/add",
                                                data: {
                                                    folderName: this.inputContent || '请输入',
                                                    parentId: data.parentId,
                                                    folderBelongTo: 2,
                                                    attachmentBelongTo: 2,
                                                }
                                            }).then(res => {
                                                if (res.code === 200) {
                                                    this.$Message.success('新增成功')
                                                    this.expandObj = {}
                                                    root.forEach(v => {
                                                        this.expandObj[v.node.id] = v.node.expand
                                                    })
                                                    this.getTreeList()
                                                } else {
                                                    this.$Message.warning({
                                                        content: res.msg,
                                                        duration: 6,
                                                        closable: true,
                                                    });
                                                }
                                            });
                                        }
                                    }
                                }
                            }
                        }
                    ),
                ]),
                // 增删改按钮部分
                h('span',
                    {
                        class: "btnNone",
                        style: {marginLeft: '1rem'}
                    },
                    [
                        //操作按钮部分
                        // 添加按钮
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px',
                                width: '20px',
                                height: '20px',
                                marginTop: '-2px'
                            },
                            on: {
                                click: () => {
                                    if (data.id) {
                                        this.append(data)
                                        if (!data.expand) this.$set(data, 'expand', true)
                                    }
                                }
                            },
                            directives: [{
                                name: 'has',
                                value: 'docManagementAdd'
                            }]
                        }),
                        // 删除按钮
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove'
                            }),
                            style: {
                                marginRight: '8px',
                                width: '20px',
                                height: '20px',
                                marginTop: '-2px'
                            },
                            on: {
                                click: () => {
                                    if (data.id) {
                                        this.deleteModal = true
                                        this.folderId = data.id
                                    } else {
                                        this.filterTreeList(root, node, data)
                                    }
                                }
                            },
                            directives: [{
                                name: 'has',
                                value: 'docManagementDelete'
                            }]
                        }),
                        // 编辑按钮
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-brush-outline'
                            }),
                            style: {
                                marginRight: '8px',
                                width: '20px',
                                height: '20px',
                                marginTop: '-2px'
                            },
                            on: {
                                click: () => {
                                    if (data.id) {
                                        this.editTree(data)
                                    }
                                }
                            },
                            directives: [{
                                name: 'has',
                                value: 'docManagementEdit'
                            }]
                        })
                    ]
                ),
                // // 确认/取消修改部分
                // h(`${ data.editState ? 'span' : ''}`,
                //     {
                //         style: {
                //             // position:'absolute',
                //             marginLeft:'.5rem'
                //         }
                //     },
                //     [
                //         // 确认按钮
                //         h('Button', {
                //             props: Object.assign({}, this.buttonProps, {
                //                 icon: 'md-checkmark'
                //             }),
                //             style: {
                //                 // marginRight: '8px',
                //                 border:0,
                //                 background:'rgba(0,0,0,0)',
                //                 fontSize:'1.3rem',
                //                 outline:"none"
                //             },
                //             on: {
                //                 click: (event) => {
                //                     this.confirmTheChange(data)
                //                 }
                //             }
                //         }),
                //         // 取消按钮
                //         h('Button', {
                //             props: Object.assign({}, this.buttonProps, {
                //                 icon: 'md-close'
                //             }),
                //             style: {
                //                 border:'0',
                //                 background:'rgba(0,0,0,0)',
                //                 fontSize:'1.3rem',
                //                 outline:"none"
                //             },
                //             on: {
                //                 click: () => { this.CancelChange(data) }
                //             }
                //         })
                //     ]
                // )
            ]);
        },
        filterTreeList(root, node, data) {
            const parentKey = root.find(el => el === node).parent;
            const parent = root.find(el => el.nodeKey === parentKey).node;
            const index = parent.children.indexOf(data);
            parent.children.splice(index, 1);
        },
        // 控制Tree当前状态函数
        setStates(data) {
            var editState = data.editState;
            if (editState) {
                this.$set(data, "editState", false);
            } else {
                this.$set(data, "editState", true);
            }
        },
        deleteAll() {
            if (this.documentIds.length == 0) {
                this.$Message.warning({
                    content: `${this.$t('common.deleteItems')}`,
                    duration: 6,
                    closable: true,
                });
                return;
            } else {
                this.deleteModalDoc = true;
            }
        },
        onSelectChange(selection) {
            this.documentIds = selection.map((item) => item.id);
        },
        // Tree修改按钮
        editTree(data) {
            event.stopPropagation();
            this.inputContent = data.title;
            this.setStates(data);
        },
        // 添加按钮
        append(data) {
            this.inputContent = ''
            const children = data.children || [];
            children.push({
                title: '',
                expand: true,
                editState: true,
                parentId: data.id
            });
            this.$set(data, 'children', children);
        },
        // 确认修改树节点
        confirmTheChange(data) {
            this.canUnwindCode = data.code;
            this.isfocus = true;
            if (!this.inputContent) {
                this.$Notice.warning({
                    title: "当前输入有误"
                });
            } else {
                if (this.inputContent.length > 100) {
                    this.$Message.warning("输入长度不能大于100！");
                    return false;
                }

                if (this.oldName !== this.inputContent) {
                    let eidt_data = {
                        id: data.id,
                        itemSort: data.itemSort,
                        title: this.inputContent
                    };
                    this.$Modal.confirm({
                        title: "提示",
                        content: `您确定将  “${this.oldName}”  重命名为 “ ${this.inputContent} ” 吗？`,
                        onOk: () => {
                            this.axios({
                                method: "post",
                                url: "/dms/knowledge/update",
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                                },
                                data: qs.stringify(eidt_data)
                            }).then(res => {
                                if (res.code === 200) {
                                    data.title = this.inputContent;
                                    this.$Message.info("修改成功");
                                    this.getTreeList();
                                }
                            });
                        },
                        onCancel: () => {
                            this.$Message.info("取消");
                        }
                    });
                    this.setStates(data);
                } else {
                    this.setStates(data);
                }
            }
        },
        // 取消修改树节点
        CancelChange(data) {
            this.$Notice.info({
                title: "取消修改"
            });
            this.setStates(data);
        },
        // 点击Tree节点触发
        handleClickTreeNode(folderHierarchyId) {
            this.pageNum = 1;
            this.folderHierarchyId = folderHierarchyId
            this.clickSearch();
        }
    }
};
</script>

<style scoped lang="scss">
.docManWapper {
    .wapperConent {
        width: 100%;
        padding: 10px 0;

        .wapperLeft {
            width: 30%;
            min-height: 750px;
            max-height: 750px;
            float: left;
            background-color: #ffffff;
            padding: 10px;
            margin-right: 1%;
            border-radius: 5px;
            overflow-y: scroll;

            .treeIpt {
                ::v-deep .ivu-input {
                    width: 100px;
                    height: 20px;
                    padding: 0;
                    border: #035beb solid 1px;
                }
            }

            .box_bot {
                //width: 100%;
                //height: 100%;
                //overflow-x: auto;
                //min-height: 80vh;
                .tree {
                    height: 100%;

                    ::v-deep .tree-children {
                        overflow: unset;
                        height: auto;
                        //max-height: 100vh !important;
                    }

                    ::v-deep .tree-open {
                        .tree-children {
                            display: block !important;
                            opacity: 1;
                        }
                    }

                    ::v-deep .tree-closed {
                        .tree-children {
                            display: none !important;
                            opacity: 0;
                            transition: 1s;
                        }
                    }

                    ::v-deep .tarGetinput {
                        .ivu-input {
                            height: 22px;
                            line-height: 22px;
                        }
                    }

                    ::v-deep .tree-container-ul {
                        height: 100%;
                        overflow: unset;
                    }
                }

                .iconBox {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding-left: 10px;

                    .icon_img {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        padding-right: 5px;
                        width: 20px;
                        height: 15px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }

        .wapperLeft::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 5px;
        }

        .wapperRight {
            width: 69%;
            min-height: 900px;
            float: left;

            .basicData {
                .operationBtn {
                    //color: #3271f0;
                    //cursor: pointer;
                    //margin-right: 10px;
                }
            }

            .pages {
                margin-top: 30px;
            }
        }
    }

    .treeBox:hover {
        font-weight: 600;
        color: #275cd4
    }

    // .ivu-tree ul li {
    //     list-style: none;
    //     /* margin: 8px 0; */
    //     padding: 0;
    //     white-space: nowrap;
    //     outline: none;
    // }
    .searchWrapper {
        background-color: #fff;
        height: 60px;
        line-height: 60px;
    }
}
</style>
